<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/css/lib/bootstrap.min.css">
    <link rel="stylesheet" href="/css/emissary.css">

    <title>Agents Listing</title>
</head>
<body>
    <header></header>

    <main class="container">
        <h2>Agents</h2>
        <table id="agents" class="table table-striped"></table>
    </main>

    <script src="/js/lib/jquery.min.js"></script>
    <script src="/js/lib/popper.min.js"></script>
    <script src="/js/lib/bootstrap.min.js"></script>
    <script src="/js/emissary.js" type="text/javascript" ></script>
    <script>
        $(document).ready(function () {
            $.ajax({
                url: "/api/v2/agents"
            }).then(function(data) {
                var trHTML = '';
                $.each(data.agents, function (i, item) {
                    trHTML += '<tr><td>' + item.agent.name + ': ' + item.agent.status + '</td></tr>';
                });
                $('#agents').append(trHTML);
            });
        });
    </script>
</body>
</html>
